<template>
  <div class="app-container">
    <el-watermark
      :content="['Liwen-左左√', '']"
      :gap="[200, 350]"
      :width="200"
      :height="100"
      :font="font"
    >
      <el-row :gutter="20">
        <!--用户数据-->
        <el-col :span="24" :xs="24">
          <el-form :inline="true">
            <el-form-item>
              <el-select
                v-model="query.rid"
                size="large"
                style="width: 300px"
                @change="selectChange"
              >
                <el-option
                  v-for="item in resultNameList"
                  :label="item.caseName"
                  :value="item.resultId"
                >
                  {{ item.caseName }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="filterValue"
                size="large"
                style="width: 100px"
                :disabled="filterDisable"
                @change="filterResult"
                clearable
              >
                <el-option
                  v-for="item in filterOption"
                  :label="item.label"
                  :value="item.label"
                >
                  {{ item.label }}
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                type="danger"
                plain
                icon="Delete"
                :disabled="multiple"
                @click="handleDelete"
                v-hasPermi="['tk:case:result:remove']"
                >删除
              </el-button>
            </el-form-item>
            <el-form-item>
              <el-button icon="Refresh" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>

          <el-table
            :cell-style="cellStyle"
            border
            :data="list"
            ref="tableRef"
            :row-style="{ height: '100px' }"
          >
            <!-- <el-table-column type="selection" width="50" align="center" /> -->
            <el-table-column
              label="case编号"
              prop="execContent.caseNumber"
              width="90px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.caseNumber }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column
                label="归属模块"
                prop="execContent.modelName"
                width="80px"
                :show-overflow-tooltip="true"
              >
                <template #default="{ row, column }">
                  <el-input
                    v-if="
                      tableRowEditId === row.id &&
                      tableColumnEditIndex === column.id
                    "
                    @blur="blurValueInput"
                    @keyup.enter.native="enterValueInput(row, column)"
                    v-model="row.execContent.modelName"
                  />
                  <span>{{ row.execContent.modelName }}</span>
                </template>
              </el-table-column> -->
            <el-table-column
              label="用例描述"
              prop="execContent.caseDescribe"
              width="200px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.caseDescribe }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="是否执行"
              prop="execContent.isExecute"
              width="80px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.isExecute }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="库"
              prop="execContent.dbName"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.dbName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="表"
              prop="execContent.tableName"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.tableName }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="执行条件"
              prop="execContent.executeRequirement"
              width="150px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.executeRequirement }}</span>
              </template>
            </el-table-column>

            <el-table-column
              label="执行的数据"
              prop="execContent.execLorData"
              width="350px"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <json-viewer
                  v-if="row.execContent.executeRequirement == 'URL_CALCULATE'"
                  copyable
                  theme="my-awesome-json-theme"
                  :expand-depth="1"
                  :value="row.execContent.execLorData"
                  style="height: 400px"
                ></json-viewer>

                <span v-else> {{ row.execContent.execLorData }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="期望结果"
              prop="execContent.expectedResults"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.expectedResults }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="实际结果"
              prop="execContent.actualResult"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <span>{{ row.execContent.actualResult }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="对比结果"
              prop="execContent.compareResult"
              :show-overflow-tooltip="true"
            >
              <template #default="{ row, column }">
                <el-tag
                  type="success"
                  v-if="row.execContent.compareResult == 'pass'"
                  >{{ row.execContent.compareResult }}</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="row.execContent.compareResult == 'fail'"
                  >{{ row.execContent.compareResult }}</el-tag
                >
              </template>
            </el-table-column>

            <el-table-column label="执行结果" prop="execResult">
              <template #default="{ row, column }">
                <el-tag type="success" v-if="row.execResult == 1"
                  >执行成功</el-tag
                >
                <el-tag
                  type="danger"
                  v-if="row.execResult == 0"
                  @click="queryExecuteLogs(row)"
                  >执行失败</el-tag
                >
                <el-tag
                  type="warning"
                  v-if="row.execResult == 2"
                  >跳过执行</el-tag
                >
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-watermark>
  </div>
</template>

<script setup>
import { tkTaskCaseApi } from "@/api/kernel/tk-task-case.js";
import { useTemplateRefsList } from "@vueuse/core";
import { ElMessage, ElMessageBox } from "element-plus";

const route = useRoute();
const caseId = ref("");
caseId.value = route.query.id;
const list = ref([]);
const font = reactive({
  // color: "rgba(224,255,255,1)",
  color: "#87cefa",
  fontSize: 18,
});
const query = ref({
  rid: "",
});

//# 测试结果
const getCaseResultList = () => {
  tkTaskCaseApi.getCaseResultList(query.value.rid).then((res) => {
    list.value = res.rows;
    tmpList.value = list.value;
  });
};
//# 测试结果下拉
const resultNameList = ref([]);
const getCaseResultNameList = () => {
  tkTaskCaseApi.getCaseResultNameList(caseId.value).then((res) => {
    resultNameList.value = res.rows;
  });
};
//# 下拉选项内容更改
const selectChange = () => {
  console.log(query.value.rid);
  multiple.value = false;
  filterDisable.value = false;
  filterValue.value = "";
  getCaseResultList();
};
//# 重置
const resetQuery = () => {
  query.value.rid = "";
  getCaseResultList();
  multiple.value = true;
  filterDisable.value = true;
  filterValue.value = "";
};

//# 行样式

const cellStyle = ({ row, column, rowIndex, columnIndex }) => {
  if (row.execContent.executeRequirement.includes("DELETE")) {
    return { backgroundColor: "#F8E6E0" };
  }
  if (row.execContent.executeRequirement === "GENERATE_ROWKEY") {
    return { backgroundColor: "#F3E2A9" };
  }
  if (row.execContent.executeRequirement === "URL_CALCULATE") {
    return { backgroundColor: "#CEE3F6" };
  }
  if (row.execContent.compareResult === "fail") {
    return { backgroundColor: "#e8816a" };
  }
};

onMounted(() => {
  getCaseResultNameList();
});

const queryExecuteLogs = (row) => {
  ElMessage({
    message: row.remark,
    type: "error",
    plain: true,
  });
};

//# 删除用例结果
const multiple = ref(true);
const handleDelete = () => {
  ElMessageBox({
    title: `提示`,
    message: h("p", null, [h("span", null, "确认要删除吗？")]),
    showCancelButton: true,
    confirmButtonText: "OK",
    cancelButtonText: "Cancel",
  })
    .then(({ value }) => {
      tkTaskCaseApi.removeCaseResult(query.value.rid).then((res) => {
        resetQuery();
        getCaseResultNameList();
        ElMessage({
          message: res.msg,
          type: "success",
          plain: true,
        });
      });
    })
    .catch(() => {});
};

//# 筛选对比结果
const filterOption = ref([{ label: "pass" }, { label: "fail" }]);
const filterValue = ref("");
const filterDisable = ref(true);
const tmpList = ref([]);

const filterResult = () => {
  if (filterValue.value) {
    console.log(tmpList.value);
    let filterList = tmpList.value.filter((item) => {
      return item.execContent.compareResult == filterValue.value;
    });
    list.value = filterList;
  } else {
    list.value = tmpList.value;
  }
};


</script>
<style></style>
